<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-container class="home-container" direction="vertical">
    <el-header>
      <el-menu
        router
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        background-color="rgba(255, 255, 255, 0)"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <img src="../assets/font/学校.png" alt="" height="60px" width="60px" class="png" />
        <span>成电教务网</span>
        <el-menu-item index="/login">登录界面</el-menu-item>
        <el-menu-item index="/desc" class="nav">项目介绍</el-menu-item>
        <el-submenu>
        <template slot="title"></template>
        <el-menu-item index="/time">开发流程</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>

    <!-- 路由占位符 -->
    <el-container>
      <!-- 右侧内容主体 -->
      <el-main>
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <!-- 路由占位符 -->
        <div class="box">
          <div class="square" style="--i:0;"></div>
          <div class="square" style="--i:1;"></div>
          <div class="square" style="--i:2;"></div>
          <div class="square" style="--i:3;"></div>
          <div class="square" style="--i:4;"></div>
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default{
    data() {
        return {
        //这是顶部导航栏的下标
        activeIndex: '2',
        }
    },
    methods:{
        handleSelect(key, keyPath) {
        console.log(key, keyPath)
    },
    }
}
</script>

<style lang="less" scoped>

.home-container{
  height: 100%;
}
.el-menu--horizontal>.el-menu-item {
  float:right
}
.el-menu--horizontal>.el-submenu {
  float:right
}

.el-main {
  
  color: #000000;
  position:absolute;
  overflow: auto;
  height: 100%;
  width: 100vw;
  display: flex;
  padding: 0%;
 }
//背景的渐变式
.el-main .color{
  position: absolute;
    filter:blur(150px);
}
.el-main .color:nth-child(1){
  top:-100px;
  right: -100px;
  width: 200vw;
  height: 100vh;
  background-color: rgb(0, 53, 214);
}

.el-main .color:nth-child(2){
  bottom:0px;
  left:0px;
  width: 80vw;
  height: 80vh;
  background-color: rgb(121, 73, 233)
}

.el-main .color:nth-child(3){
  bottom: -50px;
  right: -100px;
  width:120vw;
  height: 80vh;
  background-color:  rgb(73, 169, 233);
}
.el-header {
  overflow: hidden;
  // display: flex;
  // justify-content: space-between;
  padding-left: 0;
  // align-items: center;
  color: #fff;
  // font-size: 20px;
  height: 68px;
   background-color:rgb(0, 18, 214);

   >.el-menu{
  >  span {
      margin-left: 15px;
      font-size: 40px;
      float: left;
      color: rgb(127, 136, 255);
    }
  }
}
.png{
  float: left;
}
.el-menu-demo{
  width: 100vw;
}

// 动效
.box{
//box是login的父组件
position: absolute;
left: 50vw;
top:40vh;
transform: translate(-50%, -50%);
}
.box .square{
position: absolute;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgb(0,0,0,0.1);
border: 1px solid rgb(255,255,255,0.5);
border-right: 1px solid rgb(255,255,255,0.2);
border-bottom: 1px solid rgb(255,255,255,0.2);
background:rgb(255,255,255,0.1);
border-radius: 10px;
opacity: 0.5;
animation: animate 10s linear infinite;
animation-delay: calc(-1s*var(--i));
}
@keyframes animate{
0%,100%{
  transform: translateY(-40px);
}
50%{
  transform: translate(40px);
}
}

.box .square:nth-child(1){
top: -50px;
right: -60px;
width: 100px;
height: 100px;
}

.box .square:nth-child(2){
top: 150px;
left: -100px;
width: 120px;
height: 120px;
z-index: 2;
}

.box .square:nth-child(3){
bottom: 50px;
right: -60px;
width: 80px;
height: 80px;
z-index: 2;
}

.box .square:nth-child(4){
bottom: -80px;
left: 100px;
width: 50px;
height: 50px;
}

.box .square:nth-child(5){
top: -90px;
left: 140px;
width: 60px;
height: 60px;
}
</style>